<template>
    <div class="home">
        <div class="home-content">
            <div class="home-margin"></div>
            <div class="home-banner">
                <div class="home-banner-child home-banner-left">
                    <p>你已经做了</p>
                    <p class="banner-num-small"><i>{{ countType }}</i><i class="banner-classifier"> 道</i></p>
                    <p>{{ showType }}类型的题！</p>
                </div>
                <div class="home-banner-child home-banner-middle">
                    <p>你已经做了</p>
                    <p class="banner-num-small"><i>{{ countDifficulty }}</i><i class="banner-classifier"> 道</i></p>
                    <p>{{ showDifficulty }}难度的题！</p>
                </div>
                <div class="home-banner-child home-banner-right">
                    <p>你已经做了</p>
                    <p class="banner-num-small"><i>{{ countAll }}</i><i class="banner-classifier"> 道</i></p>
                    <p>CodePilot精选题目！</p>
                </div>
            </div>
            <div class="home-fourrec">
                <div class="home-fourrec-child">
                    <h1>每日一题</h1>
                    <el-link @click="dialogVisible = true; everyDialogOne(1)">
                        <p>{{ firstSource }}：</p>
                        <p class="fourrec-hidden">{{ firstTitle }}</p>
                    </el-link>
                </div>
                <div class="home-fourrec-child">
                    <h1>分类推荐</h1>
                    <el-link @click="dialogVisible = true; everyDialogOne(2)">
                        <p>{{ secondSource }}：</p>
                        <p class="fourrec-hidden">{{ secondTitle }}</p>
                    </el-link>
                </div>
                <div class="home-fourrec-child">
                    <h1>难度推荐</h1>
                    <el-link @click="dialogVisible = true; everyDialogOne(3)">
                        <p>{{ thirdSource }}：</p>
                        <p class="fourrec-hidden">{{ thirdTitle }}</p>
                    </el-link>
                </div>
                <div class="home-fourrec-child">
                    <h1>热门推荐</h1>
                    <el-link @click="dialogVisible = true">
                        <p>{{ fourthSource }}：</p>
                        <p class="fourrec-hidden">{{ fourthTitle }}</p>
                    </el-link>
                </div>
            </div>
            <div class="home-twopart">
                <div class="home-twopart-child">
                    <h1>学习计划</h1>
                    <ul>
                        <li v-for="(plan, index) in plans" :key="plan"><el-link
                                @click="dialogVisible = true, everyDialog(index, 1)">{{ plan }}</el-link>
                        </li>
                    </ul>
                </div>
                <div class="home-twopart-child">
                    <h1>最近做过</h1>
                    <ul>
                        <li v-for="(recent, index) in recents" :key="recent"><el-link
                                @click="dialogVisible = true, everyDialog(index, 2)">{{ recent
                                }}</el-link></li>
                    </ul>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%">
            <span class="dialog-banner"><el-link class="elLinkBigger" @click="linkRecord">{{ dialogBanner
            }}</el-link></span>
            <div class="dialog-tag">
                <ul>
                    <li v-for="tag in tags" :key="tag">{{ tag }}</li>
                </ul>
            </div>
            <div class="dialog-info">{{ dialogInfo }}</div>
            <!-- 收藏button -->
            <el-button class="dialog-collection" :icon="Collection" circle @click="toggleCollection"></el-button>
            <el-button class="dialog-record" v-if="showRecordButton" :icon="Record" circle
                @click="toggleRecord"></el-button>

            <div class="dialog-divide"></div>


            <div class="dialog-rate">
                <span class="demonstration">为CodePilot的推荐打分：</span>
                <el-rate v-model="rate" :allow-half="true">
                </el-rate>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, submitRate()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { createCollection } from '@/api/collection'
import { getRecommendList } from '@/api/recommend'
import { getProInfoFromUid } from '@/utils/useful';
import { getRecordId } from '@/api/record';
import { getStatisticsForHome } from '@/utils/useful';
import { isCollection } from '@/utils/useful';
import { isRecord } from '@/utils/useful';
import { createRecord } from '@/api/record'
import { deleteCollection } from '@/api/collection'
import { doneRecord } from '@/api/record'
import { getRandom } from '@/utils/useful'
import { getProUid } from '@/utils/useful';
import { getTime } from '@/utils/useful'




export default {
    data() {
        return {
            countType: null,
            showType: '',
            countDifficulty: null,
            showDifficulty: '',
            countAll: null,
            firstSource: '',
            firstTitle: '',
            first: null,
            secondSource: '',
            secondTitle: '',
            second: null,
            thirdSource: '',
            thirdTitle: '',
            third: null,
            fourthSource: '',
            fourthTitle: '',
            fourth: null,
            plans: [],
            plansInfo: [],
            recents: [],
            recentsInfo: [],
            dialogVisible: false,
            dialogBanner: '',
            tags: [],
            dialogInfo: '',
            Collection: "",
            condition: '',
            rate: 0,
            Record: '',
            showRecordButton: false,
            problemUid: null,
        };
    },
    mounted() {
        Promise.all([
            getRecommendList("customized"),
            getRecommendList("classified"),
            getRecommendList("challenging"),
            getRecommendList("hot"),
            getRecordId()
        ])
            .then(async (results) => {
                const s = await getStatisticsForHome()
                this.countType = s.tNum
                this.showType = s.tName
                this.countDifficulty = s.dNum
                this.showDifficulty = s.dName
                this.countAll = s.total

                console.log(results[0])
                const customizedRes = Object.values(results[0].data.problemList);

                const classifiedRes = Object.values(results[1].data.problemList);

                const challengingRes = Object.values(results[2].data.problemList);

                const hotRes = Object.values(results[3].data.problemList);

                const recordRes = Object.values(results[4].data);

                const difficultyMapping = {
                    "Medium": "中等",
                    "Easy": "简单",
                    "Hard": "困难",
                    "very easy": "简单",
                    "little easy": "简单",
                    "regular": "中等",
                    "little hard": "困难",
                    "very hard": "困难",
                };

                let d = '';
                const promises = [];

                // 每日一题
                promises.push(getProInfoFromUid(customizedRes[0])
                    .then((proInfo) => {
                        // console.log(proInfo);
                        d = difficultyMapping[proInfo.difficulty] || '';
                        proInfo.difficulty = d;
                        this.first = proInfo;
                        this.first.id = customizedRes[0] 
                        this.firstSource = proInfo.source;
                        this.firstTitle = proInfo.title;
                    }));

                // 分类推荐
                let r1 = getRandom(classifiedRes.length)
                promises.push(getProInfoFromUid(classifiedRes[r1])
                    .then((proInfo) => {
                        d = difficultyMapping[proInfo.difficulty] || '';
                        proInfo.difficulty = d;
                        this.second = proInfo;
                        this.second.id = classifiedRes[r1]
                        this.secondSource = proInfo.source;
                        this.secondTitle = proInfo.title;
                    }));

                // 难度推荐
                let r2 = getRandom(challengingRes.length)
                promises.push(getProInfoFromUid(challengingRes[r2])
                    .then((proInfo) => {
                        d = difficultyMapping[proInfo.difficulty] || '';
                        proInfo.difficulty = d;
                        this.third = proInfo;
                        this.third.id = challengingRes[r2]
                        this.thirdSource = proInfo.source;
                        this.thirdTitle = proInfo.title;
                    }));

                // 热门推荐
                let r3 = getRandom(hotRes.length)
                promises.push(getProInfoFromUid(hotRes[r3])
                    .then((proInfo) => {
                        d = difficultyMapping[proInfo.difficulty] || '';
                        proInfo.difficulty = d;
                        this.fourth = proInfo;
                        this.fourth.id = hotRes[r3]
                        this.fourthSource = proInfo.source;
                        this.fourthTitle = proInfo.title;
                    }));

                // 学习计划
                for (var i = 1; i < customizedRes.length && i < 21; i++) {
                    promises.push(getProInfoFromUid(customizedRes[i])
                        .then((proInfo) => {
                            // console.log(proInfo)
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.plansInfo.push(proInfo);
                            this.plans.push(proInfo.source + ":" + proInfo.title);
                        }));
                }
                console.log(this.plansInfo)

                // 最近做过
                for (var i = 0; i < recordRes.length && i < 20; i++) {
                    promises.push(getProInfoFromUid(recordRes[i].problemUid)
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.recentsInfo.push(proInfo);
                            this.recents.push(proInfo.source + ":" + proInfo.title);
                        }));
                }

                // 等待所有异步操作完成后进行渲染
                await Promise.all(promises);
            })
            .catch((error) => {
                console.error(error);
            });
    },

    methods: {
        submitRate() {
            console.log(this.rate)
        },
        toggleCollection() {
            console.log(this.problemUid)

            if (this.Collection === "el-icon-star-off") {
                this.Collection = "el-icon-star-on"
                createCollection(null, this.problemUid, "").then((res) => {
                    // console.log(res.data)
                    console.log("create")
                });
            }
            else {
                this.Collection = "el-icon-star-off"
                deleteCollection(this.problemUid).then((res) => {
                    console.log("delete")
                })
            }
        },
        toggleRecord() {
            if (this.Record === "el-icon-goods") {
                this.Record = 'el-icon-s-goods'
                doneRecord(this.problemUid, 0, getTime(), "done").then((res) => {
                    console.log(res.data)
                });
            }
            else { }
        },
        async everyDialogOne(one) {
            let array
            if (one === 1) {
                array = this.first
            }
            else if (one === 2) {
                array = this.second
            }
            else {
                array = this.third
            }

            this.tags.length = 0

            this.dialogBanner = array.source + ": " + array.title;
            this.dialogInfo = array.description;
            this.externalUrl = array.url;
            this.problemUid = array.id
            this.tags.push(array.difficulty)

            if (this.tags[0] === '') {
                this.tags.length = 0
            }
            //标签


            let c = isCollection(this.problemUid)

            c.then((value) => {
                if (value === true) {
                    this.Collection = "el-icon-star-on"
                }
                else {
                    this.Collection = "el-icon-star-off"
                }
            })


            let temp = this.problemUid;
            let t = isRecord(temp);
            // console.log(t)

            t.then((value) => {
                if (value === 1) {
                    this.showRecordButton = false;
                } else if (value === 2) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-s-goods';
                } else if (value === 3) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-goods';
                } else {
                    console.log("error: isRecord");
                }
            });
        },
        async everyDialog(index, two) {
            let array
            let arrayInfo
            if (two === 1) {
                array = this.plans
                arrayInfo = this.plansInfo
            }
            else {
                array = this.recents
                arrayInfo = this.recentsInfo
            }

            this.tags.length = 0

            this.dialogBanner = array[index];
            this.dialogInfo = arrayInfo[index].description;
            this.externalUrl = arrayInfo[index].url;
            // this.problemUid = arrayInfo[index].id
            this.tags.push(arrayInfo.difficulty)
            //标签
            // console.log(this.tags)
            if (this.tags[0] === '' || this.tags[0] === undefined) {
                this.tags.length = 0
            }

            this.problemUid = await getProUid(arrayInfo[index].source, arrayInfo[index].id);

            let c = isCollection(this.problemUid)

            c.then((value) => {
                if (value === true) {
                    this.Collection = "el-icon-star-on"
                }
                else {
                    this.Collection = "el-icon-star-off"
                }
            })

            let temp = this.problemUid;
            let t = isRecord(temp);
            // console.log(t)

            t.then((value) => {
                if (value === 1) {
                    this.showRecordButton = false;
                } else if (value === 2) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-s-goods';
                } else if (value === 3) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-goods';
                } else {
                    console.log("error: isRecord");
                }
            });
        },
        linkRecord() {
            createRecord(this.problemUid).then((res) => {
                window.location.href = this.externalUrl;
            })
        },
    }
}


</script>

<style lang="scss">
.home {
    background-color: #FFF7EF;

    .home-content {
        width: 1200px;
        margin: 0 auto;

        .home-margin {
            height: 20px;
        }

        .home-banner {
            position: relative;
            height: 200px;
            background-image: linear-gradient(135deg, rgb(251, 238, 208), rgb(250, 220, 209));
            border-radius: 30px;

            .home-banner-child {
                position: absolute;
                width: 400px;
                text-align: left;
                color: #633E1C;
                font-size: 30px;
                padding-top: 13px;
                padding-left: 45px;
            }

            .home-banner-middle {
                left: 400px;
            }

            .home-banner-right {
                left: 800px;
            }

            .banner-num-small {
                font-size: 80px;
                font-weight: 700;

                i {
                    font-style: normal;
                }

                .banner-classifier {
                    font-size: 30px;
                }
            }
        }

        .home-fourrec {
            display: flex;
            margin-top: 15px;
            height: 150px;
            justify-content: space-between;
            margin-bottom: 15px;

            .home-fourrec-child {
                width: 285px;
                height: 150px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
                border-radius: 30px;
                text-align: left;


                h1 {
                    font-size: 22px;
                    color: #633E1C;
                    margin-bottom: 5px;
                    margin-left: 25px;
                    margin-top: 10px;
                }

                a:hover {
                    color: #865E2A;
                    text-decoration: underline;
                }

                p {
                    font-size: 18px;
                    color: #865E2A;
                    margin-left: 25px;
                }

                .fourrec-hidden {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .el-link.is-underline:hover:after {
                    border-bottom: none;
                }
            }
        }

        .home-twopart {
            display: flex;
            justify-content: space-between;

            .home-twopart-child {
                width: 590px;
                text-align: left;
                border: 2px dotted #FF9000;
                border-radius: 30px;

                h1 {
                    font-size: 32px;
                    color: #633E1C;
                    margin-top: 15px;
                    margin-left: 18px;
                }

                ul {
                    margin-top: 2px;
                    margin-left: 20px;
                    margin-bottom: 8px;
                }

                li {
                    height: 38px;
                    font-size: 22px;
                    line-height: 38px;
                }

                .el-link {
                    color: #865E2A;
                    font-size: 22px;
                    //溢出
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .el-link.is-underline:hover:after {
                    border-bottom: none;
                }

                a:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>